<template>
  <view class="bg-box">
    <view class="bg-white nav-bar-place"
          :style="'height:'+custom_bar+'px'"></view>
    <view id="search" class="cu-bar search bg-white fixed search-box"
          :style="'top:'+custom_bar+'px'">
      <view style="position:relative;" @click="handleToNews()">
        <image src="/static/icon/index/xingzhuang@2x.png" style="width: 40upx; height: 46upx; margin-left: 30upx;"></image>
        <view v-if="!is_read" style="width: 16upx; height: 16upx; border-radius: 50%; background-color: #E52718; position: absolute; right: 0; top: 0;"></view>
      </view>
      <view class="search-form round" @click="handleToSearch">
        <image src="/static/icon/index/sousuo@2x.png" class="search-icon"></image>
        <input :adjust-position="false" type="text" placeholder="搜索" :disabled="true"
               placeholder-style="color: #D8D8D8;"
               confirm-type="search" class="search-input"/>
      </view>
      <view class="action">
        <view class="nav-attention" @click="handleToMyAttention()">关注</view>
      </view>
    </view>
    <!--占搜索位-->
    <view :style="'height: '+search_height+'px'" class="search-place"></view>
    <view class="swiper-box">
      <swiper class="round-dot" :indicator-dots="true" :circular="true"
              interval="5000" duration="500" style="height: 466upx; border-radius: 20upx;">
        <swiper-item v-for="(item,index) in swiper_data" :key="index" class="swiper-items"
                     @click="handleToArticle(item,'from_swiper')">
          <image :src="item.img_arr[0]" class="swiper-imgs"
                 mode="aspectFill" v-if="item.img_arr"></image>
        </swiper-item>
      </swiper>
    </view>
    <view class="flex justify-between" style="width: 100%; padding: 0 20upx; flex-wrap: wrap;">
      <view v-if="page_main_data.length" class="flex flex-direction bg-white list"
            v-for="(item,index) in page_main_data" :key="index" @click="handleToArticle(item,'from_article')">
        <image :src="item.img_arr && item.img_arr[0]" mode="aspectFill"
               style="width: 346upx; height: 384upx; border-radius: 20upx 20upx 0 0;"></image>
        <view class="flex flex-direction" style="padding: 20upx;">
          <view class="text-hidden" style="width: 100%; font-size: 28upx; font-weight: bold; color: black;">
            {{ item.title }}
          </view>
          <view class="flex align-center" style="width: 100%; height: 40upx; margin: 20upx 0;">
            <view class="flex justify-center align-center tag">{{ item.category || '暂无分类' }}</view>
            <view>
              <image src="/static/icon/index/dianzan@2x.png"
                     style="width: 26upx; height: 26upx;margin: 0 8upx;"></image>
            </view>
            <view style="color: #999999; font-size: 24upx;">{{ item.zan_num }}</view>
          </view>
          <view style="margin-bottom: 7%;" v-if="item.product">
            <view v-if="item.product.sale_price === '0.00'"
                  style="font-size: 28upx; color: #D8D8D8; font-weight: bold;">免费
            </view>
            <view v-else style="font-size: 28upx; color: #E52718; font-weight: bold;">
              ¥{{ item.product.sale_price }}
            </view>
          </view>
          <view class="flex align-center">
            <image :src="item.user.avatar" mode="aspectFill" style="width: 44upx; height: 44upx; border-radius: 50%;"
                   v-if="item.user"></image>
            <view class="text-hidden" style="width: 140upx; font-size: 24upx; color: #999999; margin-left: 10upx;"
                  v-if="item.user">
              {{ item.user.nick_name }}
            </view>
          </view>
        </view>
      </view>
    </view>
    <view v-if="!page_main_data.length && show_flag" class="justify-center align-center flex-direction"
          style="width: 100%; margin-top: 160upx; text-align: center;">
      <image src="/static/image/no_content@2x.png" style="width: 264upx; height: 264upx;"></image>
      <view class="flex justify-center" style="font-size: 24upx; color: #999999;">暂无内容</view>
    </view>
    <view>
      <view class="flex align-center justify-center"
            v-if="page_main_data.length >= 15"
            style="width: 100%; height: 102upx; padding: 0 50upx;">
        <view style="width: 30%; height: 1px; background-color: #F1F1F1;"></view>
        <view style="width: 40%; text-align: center;">
          <view v-if="!bottom_flag" style="color: #CACACA; font-size: 24upx; margin: 0 40upx;">到底了</view>
          <view v-else class="action">
            <view class="cu-load" :class="!is_load?'loading':'over'" style="font-size: 28upx; color: #CACACA;"></view>
          </view>
        </view>
        <view style="width: 30%; height: 2upx; background-color: #F1F1F1;"></view>
      </view>
    </view>
  </view>
</template>

<script>
import {numSwitch} from "utils/wxUtil";
import {ad_getListByCon, article_getArticleListByCon} from "api/index/index";

export default {
  data() {
    return {
      custom_bar: 0, //通知栏高度
      search_height: 0, //搜索框高度
      bottom_flag: true, //触底标识
      page: 1, //分页
      swiper_data: [], //轮播图数据
      page_main_data: [], //页面数据
      is_load: false, //加载
      show_flag: false,
      is_read: '', //是否已读
      is_tourist: 0, //是否是游客
    }
  },
  mounted() {
    const query = uni.createSelectorQuery().in(this);
    query.select('#search').boundingClientRect(data => {
      this.search_height = data.height + this.custom_bar;
    }).exec();
  },
  methods: {
    //初始化
    pageInit(page, type = 'init') {
      article_getArticleListByCon({page}).then(res => {
        if (type === 'init') {
          this.page_main_data = [];
        }
        let temp_data = res.data.data;
        if (!temp_data.length) {
          this.bottom_flag = false;
        } else {
          temp_data.forEach(item => {
            item.zan_num = this.computeNum(item.zan_num);
            this.page_main_data.push(item)
          })
        }
        this.show_flag = true;
      }).catch(err => {
        console.log(err)
      })
    },
    //获取轮播图数据
    getSwiperData() {
      ad_getListByCon({position: 0}).then(res => {
        this.swiper_data = [];
        this.swiper_data = res.data && res.data.ads;
        this.is_read = res.data && res.data.is_read;
      })
    },
    computeNum: numSwitch,
    //去我的关注
    handleToMyAttention() {
      this.$uniNavigateTo({
        url: '/pages/my/myAttention/myAttention'
      })
    },
    //去文章页
    handleToArticle(item,from_type) {
      // this.$uniNavigateTo({
      //   url: '/pages/test'
      // })
      let {article, type: is_jump, img_arr,id:item_id} = item
      let {0: img} = img_arr || [];
      let {id: article_id, type} = article || {};

      if (from_type === 'from_article') {
        article_id = item_id
        type = is_jump
        is_jump = undefined
        img= undefined
      }

      if (is_jump === 1 || article_id) {
        if (article_id) {
          const jump_url_obj = {
            article: '/pages/article/article',
            article_product: '/pages/passBand/projectDetail/projectDetail',
            product: '/pages/passBand/otherDetail/otherDetail',
          }
          this.$uniNavigateTo({
            url: jump_url_obj[type],
            query: {
              article_id
            }
          })
        } else {
          uni.showToast({
            title: '跳转页面不存在',
            icon: 'none'
          })
        }
      } else {
        let imgs_arr = [];
        this.swiper_data.forEach(item => {
          if (item.img_arr && item.img_arr[0]) {
            imgs_arr.push(item.img_arr[0])
          }
        })
        if (imgs_arr.length && img) {
          uni.previewImage({
            urls: imgs_arr,
            current: img
          });
        }
      }
    },
    //去搜索页
    handleToSearch() {
      this.$uniNavigateTo({
        url: '/pages/index/search/search'
      })
    },
    //去我的消息页
    handleToNews() {
      this.$uniNavigateTo({
        url: '/pages/news/news'
      })
    }
  },
  onLoad(e){
    this.is_tourist = getApp().globalData.is_tourist;
    if(!uni.getStorageSync('user_info') && !this.is_tourist){
      uni.redirectTo({
        url: '/pages/login/registration'
      })
    }
    // this.update();
    uni.$on("handleGetRedDot", () => {
      this.getSwiperData();
    });
  },
  onShow() {
    this.custom_bar = uni.getStorageSync('system_info').statusBarHeight;
    this.pageInit(1, 'init');
    this.getSwiperData();
  },
  //上拉加载
  onReachBottom() {
    if (this.bottom_flag) {
      this.is_load = false;
      this.page += 1;
      this.pageInit(this.page, 'pull_up');
    }
    console.log('上拉加载')
  },
  //下拉刷新
  onPullDownRefresh() {
    this.page = 1;
    this.show_flag = false;
    this.pageInit(1, 'init');
    this.getSwiperData();
    this.bottom_flag = true;
    uni.stopPullDownRefresh();
  }
}
</script>

<style lang="less" scoped>
.bg-box {
  width: 100%;
  min-height: 100vh;
  background-color: #F8F8F8;
}

.nav-bar-place {
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 999;
}

.search-box {
  width: 100%;
  border: none;
}

.search-icon {
  width: 26upx;
  height: 30upx;
  margin: 0 22upx;
}

.search-input {
  font-size: 28upx;
  line-height: 20px !important;
}

.nav-attention {
  color: #333333;
  font-size: 28upx;
  font-weight: bold;
}

.search-place {
  width: 100%;
}

.swiper-box {
  width: 100%;
  padding: 0 20upx;
  margin-bottom: 20upx;
}

.swiper-sec-box .swiper-items {
  height: 466upx;
  border-radius: 20upx;
}
.swiper-imgs{
  width: 100%;
  height: 466upx;
  border-radius: 20upx;
}
/deep/ .cu-bar {
  height: 130upx;
}

/deep/ .cu-bar.fixed, .nav.fixed {
  box-shadow: none;
}

/deep/ .cu-bar .search-form {
  height: 70upx;
  border: 2upx solid #EDEDED;
  background-color: white;
}

/deep/ .uni-swiper-wrapper {
  border-radius: 20upx;
}

/deep/ .uni-swiper-dots {
  left: 90% !important;
  width: auto;
}

/deep/ .uni-swiper-dot {
  width: 16upx !important;
  height: 16upx !important;
  background-color: white;
}

/deep/ .uni-swiper-dot-active {
  background-color: #E52718;
}

/deep/ .uni-swiper-dot-active::after {
  content: none !important;
  background-color: #E52718 !important;
}

.list {
  width: 346upx;
  height: 618upx;
  border-radius: 20upx;
  margin-bottom: 30upx;
}

.tag {
  font-size: 22upx;
  padding: 0 12upx;
  color: #E52718;
  height: 40upx;
  background-color: #FFE9E7;
  border-radius: 4upx;
}
</style>
